<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    <title>图片翻转切换</title>
    <style>
         main{
             width: 333px;
             height: 402px;
             border: 1px solid #ccc;
             margin: 60px auto;
         }   
         h2{
             display: inline-block;
             margin: 0;
             width: 100%;
             height: 40px;
             border-bottom: 2px solid #000;
             text-align: center;
             line-height: 40px;
             font-size: 16px;
             font-weight: normal;
         }
         main>div{
             width: 100%;
             height: 350px;
             margin-top: 10px;
             display: flex;
             justify-content: space-around;
             flex-wrap: wrap;
         }
         section{
             width: 120px;
             height: 75px;
             position: relative;
         }
         section>img{
             width: 100%;
             height: 100%;
             border: 1px solid orange;  
             position: absolute;
             top: 0;
             left: 0;           
         }
         section>span{
             display: inline-block;
             width: 120px;
             height: 75px;
             background-color: orange;
             color: #fff;
             line-height: 75px;
             text-align: center;
         }
        </style>
</head>

<body>
    <main>
        <h2>
            热门品牌推荐
        </h2>
        <div>
            <section><img src="img/11.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/22.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/33.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/44.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/55.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/66.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/77.jpg" alt=""><span>肌龄</span></section>
            <section><img src="img/88.jpg" alt=""><span>肌龄</span></section>
        </div>
    </main>
</body>

</html>

<script>

    // $('section').hover(function(){
    //     $(this).find('img').stop().animate({height:0,top:75/2,bottom:75/2},600)
    //     $(this).find('span').stop().delay(600).animate({height:75,top:0},600)
    // },function(){
    //     $(this).find('img').stop().animate({height:75,top:0},600)
    //     $(this).find('span').stop().delay(600).animate({height:0,top:75/2,bottom:75/2},600)
    // })

    $('section').hover(function(){
        $(this).children('img').stop().animate({height:0,top:38,bottom:38},200);
        $(this).children('span').stop().animate({height:75,top:0,bottom:0},200)
    },function(){
        $(this).children('img').stop().animate({height:75,top:0,bottom:0},200);
        $(this).children('span').stop().animate({height:0,top:38,bottom:38},200)
    }) 

</script>